<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>

			<h1 class="mui-title">二维码充值</h1>
		</header>
		<div class="mui-content">
			<div class="mui-card">
				<p class="mui-content-padded mui-text-center" style="padding: 10px;">
					先保存二维码到相册，再微信扫一扫
				</p>
				<div class="mui-card-content mui-text-center">
					<div class="mui-content-padded">
						<p>充值金额</p>
						<h3 id="payAmount">0.00</h3>
					</div>
					<div style="width: 180px; height: 180px; margin: 20px auto 40px; overflow: hidden; text-align: center; position: relative;">
						<img id="imgQR" src="images/wxqr.jpg" style="width: 330px; position: absolute; top: -122px; left: -75px;" />
					</div>
				</div>
				<div class="mui-card-footer">
					<a class="mui-card-link" href="javascript:;" id="desc">使用说明</a>
					<a class="mui-card-link" href="javascript:;" id="save">保存二维码</a>
				</div>
			</div>
			<div class="mui-content-padded mui-text-center" style="position: fixed; bottom: 0; width:100%;">
				<img src="images/wxlogo.png" width="100" />
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init();

			var imgUrl;

			document.getElementById("desc").addEventListener('tap', function() {
				app.openMessage(19);
			})

			document.getElementById("save").addEventListener('tap', function() {
				saveImgToGallery(imgUrl); 
			})

			init = function(payAmount, img) {
				imgUrl = img;
				document.getElementById("imgQR").setAttribute("src", img);
				document.getElementById("payAmount").innerText = payAmount;
			}
			
			getFilename = function (url) {
				var index = url.lastIndexOf('/');
				return url.substring(index);
			}

			saveImgToGallery = function(imgUrl) {
				var waiting = plus.nativeUI.showWaiting();
				var filename= getFilename(imgUrl);
				var downLoader = plus.downloader.createDownload(imgUrl, {
					method: 'GET',
					filename: '_downloads/' + filename
				}, function(download, status) {
					var fileName = download.filename;
					console.log('文件名:' + fileName);
					console.log('下载状态：' + status);
					/**
					 * 保存至本地相册
					 */
					plus.gallery.save(fileName, function() {
						mui.toast("图片已保存到相册");
						waiting.close();
					});		
				});
				/**
				 * 开始下载任务
				 */
				downLoader.start();
			}
		</script>
	</body>

</html>